<template>
  <Basic title="居家隔离" :show-dialog="showHouseholdDialog" @cancel="handleCancel" @confirm="handleConfirmDialog">
    <div class="pt-2">
      <van-field
        v-model="isolate_endtime"
        is-link
        readonly
        name="datetimePicker"
        label="结束隔离时间"
        placeholder="请选择结束隔离时间"
        @click="showCalendar = true"
        label-width="100"
        :rules="[{ required: true, message: '请输入隔离时间!' }]"
      />
      <van-calendar v-model:show="showCalendar" color="#2e7cff" teleport="body" @confirm="handleConfirmCalendar" />
      <van-field
        v-model="remark"
        required
        type="textarea"
        name="remark"
        label="隔离原因"
        placeholder="隔离原因"
        rows="2"
        maxlength="20"
        show-word-limit
        label-width="100"
        :rules="[{ required: true, message: '请输入隔离原因' }]"
      />
    </div>
  </Basic>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import { usePersonStore } from '@/store/person'
import Basic from './Basic.vue'
import { Toast } from 'vant'
import dayjs from 'dayjs'

export default defineComponent({
  name: 'Rejected',
  components: {
    Basic
  },
  props: {
    person: {
      type: Object,
      default: () => {}
    },
  },
  setup(props, { emit }) {
    const store = usePersonStore()
    const person = computed(() => props.person)
    const showHouseholdDialog = computed(() => {
      if(!person.value) return false
      return store.showHouseholdDialog
    })

    const remark = ref('');
    const isolate_endtime = ref('');
    const showCalendar = ref(false);

    const handleConfirmCalendar = (date:any) => {
      isolate_endtime.value = dayjs(date).format('YYYY-MM-DD');
      showCalendar.value = false;
    };

    const handleCancel = () => {
      store.setShowHouseholdDialog(false)
    }

    const handleConfirmDialog = async () => {
      if (!isolate_endtime.value) return Toast.fail('请选择隔离结束时间');
      if (!remark.value) return Toast.fail('请输入隔离原因');

      
      if (!isolate_endtime.value) return Toast.fail('请选择隔离结束时间');
      const { code, data } = await store.isolatePerson({ isolate_endtime: dayjs(isolate_endtime.value).format('YYYY-MM-DD'), remark: remark.value }, props.person.id) as any
      if(code === 200) {
        store.setShowHouseholdDialog(false)
        emit('success', data)
      }
    }

    return {
      showHouseholdDialog,
      remark,
      isolate_endtime,
      handleConfirmCalendar,
      showCalendar,
      handleCancel,
      handleConfirmDialog
    }
  }
})
</script>



